<template>
	<div class="scan-verify-container">
		<div class="scan-verify-content">
			<div class="scan-container">
				<img src="/static/saom.png" class="rqtup" />
				<div class="sham">扫码核销</div>
			</div>
			<div class="shaomia">扫描用户预约码进行核销</div>
			<button @click="scanCodeEvent">立即核销</button>
		</div>
	</div>
</template>

<script setup>
	// const scanAndVerify = () => {
	// 	// 这里添加扫码核销的逻辑
	// 	console.log('执行扫码核销操作');
	// };
	function scanCodeEvent() {
		wx.getSetting({
			success(res) {
				if (!res.authSetting['scope.camera']) {
					// 用户未授权，请求授权
					wx.authorize({
						scope: 'scope.camera',
						success() {
							// 用户已授权，可以调用扫码API
							wx.scanCode({
								onlyFromCamera: true,
								success(req) {
									console.log("扫码成功", req);
								},
								fail(err) {
									console.error("扫码失败", err);
								}
							});
						},
						fail() {
							// 用户拒绝授权，可以引导用户打开设置页面手动授权
							wx.showModal({
								title: '提示',
								content: '需要使用相机功能，请在设置中打开权限',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											if (settingdata.authSetting[
												'scope.camera']) {
												// 用户在设置中打开权限后，再次调用扫码API
												wx.scanCode({
													onlyFromCamera: true,
													success(req) {
														console.log("扫码成功",
															req);
													},
													fail(err) {
														console.error("扫码失败",
															err);
													}
												});
											}
										}
									});
								}
							});
						}
					});
				} else {
					// 用户已授权，直接调用扫码API
					wx.scanCode({
						onlyFromCamera: true,
						success(req) {
							console.log("扫码成功", req);
						},
						fail(err) {
							console.error("扫码失败", err);
						}
					});
				}
			}
		});
	}
</script>

<style scoped>
	.scan-verify-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.scan-verify-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		padding: 54upx;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		width: 300px;
		text-align: center;
		height: 400upx;
		/* 确保容器有足够的高度 */
		transform: translate(0px, -276upx);
	}

	.scan-container {
		display: flex;
		/* 使用flex布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.sham {
		color: #333;
		font-size: 46upx;
		margin-left: 10px;
		transform: translate(0px, -12upx);
	}

	.shaomia {
		margin: 10px 0;
		color: #616161;
		font-size: 34upx;
	}

	.rqtup {
		width: 56upx;
		height: 56upx;
		margin-bottom: 10px;
	}

	button {
		margin: 10px 0 0;
		/* padding: 10px 20px; */
		border: 1px solid #1890ff;
		/* 设置边框线为蓝色 */
		border-radius: 4px;
		background-color: #ffffff;
		/* 设置背景为白色 */
		color: #1890ff;
		/* 设置字体颜色为蓝色 */
		font-size: 36upx;
		cursor: pointer;
		transition: all 0.3s;
		/* 过渡效果应用于所有属性变化 */
		width: 600upx;
		height: 100upx;
	}
</style>